import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer'
import { attr as svgAttr } from 'tiny-svg'

const HIGH_PRIORITY = 1500

type EventBus = import('diagram-js/lib/core/EventBus').default
type Element = import('diagram-js/lib/core/Types').ElementLike
type Shape = import('diagram-js/lib/core/Types').ShapeLike

class CustomRenderer extends BaseRenderer {
  static $inject = ['eventBus', 'bpmnRenderer']
  bpmnRenderer: BaseRenderer
  constructor(eventBus: EventBus, bpmnRenderer: BaseRenderer) {
    super(eventBus, HIGH_PRIORITY)
    this.bpmnRenderer = bpmnRenderer
  }
  canRender(element: Element) {
    // ignore labels
    return !element.labelTarget
  }

  /**
   * 自定义节点图形
   * @param {*} parentNode 当前元素的svgNode
   * @param {*} element
   * @returns
   */
  drawShape(parentNode: SVGElement, element: Shape) {
    const shape = this.bpmnRenderer.drawShape(parentNode, element)
    const { type } = element
    // 开始 填充绿色
    if (type === 'bpmn:StartEvent') {
      svgAttr(shape, { fill: '#77DF6D' })
      return shape
    }
    if (type === 'bpmn:EndEvent') {
      svgAttr(shape, { fill: '#EE7B77' })
      return shape
    }
    if (type === 'bpmn:UserTask') {
      svgAttr(shape, { fill: '#A9C4F8' })
      return shape
    }
    return shape
  }

  getShapePath(shape: Shape) {
    return this.bpmnRenderer.getShapePath(shape)
  }
}

CustomRenderer['$inject'] = ['eventBus', 'bpmnRenderer']

export default CustomRenderer
